<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<JNavBar :title="'零担专区'"></JNavBar>
		<!-- 标签页 -->
		<view class="tab-container">
			<view :class="{ active: item.id == activeTab }" @click="switchTab(item)" v-for="(item, i) in mainTabList" :key="i" class="tab-item">
				<text class="tab-text">{{ item.label }}</text>
			</view>
		</view>

		<block v-if="activeTab == 1">
			<!-- 搜索栏 -->
			<view class="search-container">
				<view class="search-bar">
					<input type="search" placeholder="品名搜索" class="search-input" />
					<u-icon name="search" color="#007aff" size="28"></u-icon>
				</view>
			</view>

			<!-- 主内容区域 -->
			<view class="content">
				<u-empty mode="data"></u-empty>
			</view>

			<!-- 底部按钮 -->
			<view class="bottom-btn-container">
				<button class="register-btn" @click="goToRegister">去登记</button>
			</view>
		</block>

		<block v-else>
			<view class="tab-wrap">
				<u-tabs :list="tabsList" :scrollable="false" @change="tabsChange"></u-tabs>
			</view>
			<!-- 搜索栏 -->
			<view class="search-container">
				<view class="search-bar">
					<input type="search" placeholder="品名、订单号搜索" class="search-input" />
					<u-icon name="search" color="#007aff" size="28"></u-icon>
				</view>
			</view>

			<!-- 主内容区域 -->
			<view class="content" style="padding: 0">
				<u-empty mode="data"></u-empty>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 1,
			mainTabList: [
				{ id: 1, label: '登记记录' },
				{ id: 2, label: '线上订单' }
			],

			tabsList: [
				{
					name: '全部'
				},
				{
					name: '已付款'
				},
				{
					name: '已完成'
				},
				{
					name: '已退款'
				}
			]
		};
	},
	methods: {
		tabsChange(item) {
			console.log(item, '------item');
		},
		switchTab(item) {
			this.activeTab = item.id;
		},
		goToRegister() {
			// 跳转到登记页面
			console.log('跳转到登记页面');

			uni.navigateTo({
				url: '/pagesExtend/lingDanZhuanQv/addLingDan'
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.tab-container {
	background-color: #fff;
	display: flex;
	height: 88rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	// border: 1px solid #000;
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		.tab-text {
			font-size: 32rpx;
			color: #333;

			transition: all 0.3s;
		}
	}
	.tab-item.active {
		background: rgba(0, 122, 255, 0.1);
		.tab-text {
			font-weight: bold;
			color: #007aff;
		}
	}
}
.tab-wrap {
	background-color: #fff;
}
.search-container {
	background-color: #fff;
	background-color: #f5f5f5;
	padding: 20rpx 30rpx;
	.search-bar {
		height: 72rpx;
		background-color: #f5f5f5;
		background-color: #fff;
		border: 2rpx solid #cfcfcf;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.search-input::placeholder {
			color: #999;
		}
	}
}

.content {
	flex: 1;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 140rpx;
}

.bottom-btn-container {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0 30rpx;
	height: 140rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
	.register-btn {
		width: 100%;
		height: 88rpx;
		background-color: #007aff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
